<template>
  <div>
    <myDivider name="大屏数据"></myDivider>
    <el-empty style="height: 70vh;" description="缺少大屏配置" :image-size="200" v-if="!show">
      <el-button type="primary" @click="addClick">新增</el-button>
    </el-empty>
    <div v-else>
      <div style="position: relative;width: 100%;height: 10px;">
        <el-popover placement="bottom" width="60px" trigger="click">
          <div style="width:50px;cursor: pointer;">
            <div style="width: 100%;text-align: center;" @click="updateClick">
              编辑</div>
          </div>
          <i slot="reference" style="font-size: 34px;position: absolute;right: 135px;top: 0;"
            class="el-icon-s-operation"></i>
        </el-popover>
      </div>
      <el-form ref="formData" label-width="130px" label-position="left" :model="formData"
        style="margin-left: 50px;margin-top: 20px;">
        <div class="title">党员群众服务中心</div>
        <el-form-item label="辖区共有党支部：">
          {{ formData.partyBranchNum }}
          <span>个</span>
        </el-form-item>
        <el-form-item label="辖区共有党支部：">
          {{ formData.partyMemberNum }}
          <span>个</span>
        </el-form-item>
        <div class="title">退役军人服务站</div>
        <el-form-item label="拥军活动总人次：">
          {{ formData.supportTheArmyNum }}
          <span>人次</span>
        </el-form-item>
        <div class="title">社区志愿者</div>
        <el-form-item label="志愿者团队：">
          {{ formData.volunteerTeamNum }}
          <span>个</span>
        </el-form-item>
        <el-form-item label="志愿者人数：">
          {{ formData.volunteerNum }}
          <span>人</span>
        </el-form-item>
        <el-form-item label="志愿者活动次数：">
          {{ formData.volunteerServeNum }}
          <span>次</span>
        </el-form-item>
        <div class="title">大屏图片</div>
        <el-image v-if="formData.pic" style=" height: 100px;margin-top: 10px;" :src="formData.pic"
          :preview-src-list="[formData.pic]">
        </el-image>
        <div v-else style="margin: 20px 0 ;font-size: 14px;color: #aaa;">暂无大屏图片</div>
      </el-form>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      logOnUser: {},
      show: false,
    }
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    let res = await this.$api.axios.get('/business/dataVisualConfig/detail?unitId=' + this.logOnUser.unitId)
    if (res && res.data) {
      this.show = true
      this.formData = res.data
    } else {
      this.show = false
    }


  },
  methods: {
    addClick() {
      this.$router.push('/largeScreenUpdate?type=add') //居委会大屏数据新增

    },
    updateClick() {
      this.$router.push('/largeScreenUpdate?type=update') //居委会大屏数据修改

    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-weight: bold;
  margin-top: 30px;
}
</style>